<template>
  <view class="container">
		<!-- 要求描述 -->
    <view class="edit-wrap">
      <view class="header">
        <text class="title">描述内容主题</text>
        <view class="op">重置<uni-icons type="refreshempty" size="18" color="#BFC6CA"></uni-icons
        ></view>
      </view>
      <view class="content">
				<uni-easyinput 
					type="textarea" 
					v-model="value" 
					placeholder="输入关键词或大纲,描述的越详细生成越准确"
					trim="both"></uni-easyinput>
			</view>
      <view class="footer">
				<view class="op">粘贴<uni-icons fontFamily="CustomFont" :size="18" color="#BFC6CA">{{'\ue687'}}</uni-icons></view>
				<view class="op">清空<uni-icons type="trash" size="18" color="#BFC6CA"></uni-icons></view>
			</view>
    </view>
		<!-- 类型选择 -->
    <view class="selector-wrap">
      <view class="selector-item">
        <view class="desc">
          <text class="title">类型</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择类型" 
					placeholder=""
					:localdata="items"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
      <view class="selector-item">
        <view class="desc">
          <text class="title">字数</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择字数" 
					placeholder=""
					:localdata="itemsZ"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
    </view>
		<!-- 额外填写内容 -->
		<!-- <view class="extra-info">
			<label class="label">脚本角色设定:</label>
			<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入人物信息" @input="input"></uni-easyinput>
		</view> -->
		
    <!-- 提交按钮 -->
    <button class="submit-button" @click="submitScript">生成脚本</button>
		<!-- ai 弹框 -->
		<view class="arrow-fixed" @click="openAiScript"></view>
		<uni-popup 
			ref="popupRef" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			:mask-click="false"
			background-color="#fff">
			<view class="script-wrapper">
				<view class="header">
					<view class="title"></view>
					<uni-icons type="closeempty" size="30" @click="closeAiScript"></uni-icons>
				</view>
				<view class="content">
					这是一大段文字啦这是一大段文字啦这是一大段文字啦这是一大段文字啦这是一大段文字啦这是一大段文字啦这是一大段文字啦这是一大段文字啦
				</view>
				<view class="footer">
					<text>以上内容生成,\n不代表本小程序观点</text>
					<text>字数:553</text>
				</view>
			</view>	
		</uni-popup>
    <!-- 输出区域 -->
    <!-- <view v-if="generatedScript" class="output">
      <text class="output-text">{{ generatedScript }}</text>
      <button class="copy-button" @click="copyText">复制</button>
      <button class="download-button" @click="downloadScript">下载</button>
    </view> -->
  </view>
</template>

<script setup>
import { ref } from "vue";

// 脚本类型
const scriptTypes = ["短视频", "广告文案", "影视剧本", "对话场景"];
const scriptType = ref(0); // 默认选中“短视频”
const keywords = ref(""); // 用户输入的关键词或大纲
const wordCount = ref(300); // 默认字数为 300
const generatedScript = ref(""); // 生成的脚本内容

const show = ref(false);
const items = ref([
  {
    text: "短视频",
    value: "0",
  },
  {
    text: "广告文案",
    value: "1",
  },
  {
    text: "影视剧本",
    value: "2",
  },
	{
    text: "对话场景",
    value: "3",
  },
	{
    text: "采访提纲",
    value: "3",
  },
	{
		text: "课程脚本",
    value: "3",
	},
	{
		text: "游戏剧情",
    value: "3",
	}
]);
const itemsZ= ref([
	{
    text: "50字",
    value: "0",
  },
	{
    text: "100字",
    value: "1",
  },
  {
    text: "200字",
    value: "2",
  },
  {
    text: "500字",
    value: "3",
  },
	{
    text: "1000字",
    value: "4",
  }
])
const value = ref("")
const popupRef = ref(null)

const onchange = (e) => {
  const value = e.detail.value;
};

const openAiScript = () => {
	console.log("popupRef",popupRef.value);
	popupRef.value.open('bottom');
}

const closeAiScript = () => {
	popupRef.value.close();
}

// 切换脚本类型
const onScriptTypeChange = (event) => {
  scriptType.value = event.detail.value;
};

// 提交生成脚本
const submitScript = () => {
  // 这里模拟生成脚本的过程
  generatedScript.value = `生成的脚本：
  类型: ${scriptTypes[scriptType.value]} 
  关键词: ${keywords.value}
  字数限制: ${wordCount.value}字
  这里是根据输入内容生成的脚本。`;
};

// 复制文本
const copyText = () => {
  if (generatedScript.value) {
    uni.setClipboardData({
      data: generatedScript.value,
      success: () => {
        uni.showToast({
          title: "脚本已复制",
          icon: "success",
        });
      },
    });
  }
};

// 下载脚本
const downloadScript = () => {
  const blob = new Blob([generatedScript.value], { type: "text/plain" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "generated_script.txt";
  link.click();
};
</script>

<style lang="scss" scoped>
/* 自定义icon */
@font-face {
	font-family: CustomFont;
	src: url('../../static/iconfont.ttf');
}
.container {
  padding: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  /* background: #fafcff; */
	background: linear-gradient(to bottom, #C4DCFA, #f0f0f0);
}

.submit-button {
  background-color: #3386F1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 20px;
}
.edit-wrap {
  background: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 15rpx;
  padding: 10rpx 0;
	margin-bottom: 40rpx;
  box-sizing: border-box;
  .header {
    display: flex;
    padding: 10rpx 20rpx 20rpx 20rpx;
    justify-content: space-between;
		align-items: center;
    border-bottom: 1rpx solid #F6F7FB;
		.title {
			font-size: 28rpx;
			font-weight: bold;
		}
		.op {
			font-size: 28rpx;
			margin-left: 10rpx;
			color: #BFC6CA;
		}
  }
	.content {
		&::v-deep .is-input-border {
			border: none;
		}
		&::v-deep .uni-easyinput__content-textarea {
			height: 400rpx;
			min-height: 400rpx;
		}
	}
	.footer {
		padding: 20rpx 10rpx;
		border-top: 1rpx solid #F6F7FB;
		display: flex;
		flex-direction: row-reverse;
		color: #BFC6CA;
		.op {
			margin-right: 20rpx;
		}
	}
}
.selector-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .selector-item {
		position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 48%;
    height: 140rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    background: white;
    border-radius: 15rpx;
    font-size: 30rpx;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		.custom-picker {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		&::v-deep .input-value {
			border: none;
			height: 140rpx;
			visibility: hidden;
		}
		&::v-deep .arrow-area {
			display: none;
		}
    .desc {
      display: flex;
      flex-direction: column;
    }
    .title {
      font-weight: bold;
    }
    .content {
      color: #90a4ae;
    }
  }
}
.extra-info {
	margin-bottom: 20rpx;
	.label {
		display: inline-block;
		margin: 15rpx 10rpx;
		font-weight: bold;
		font-size: 28rpx;
	}
}
.arrow-fixed {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 40rpx;
	background: url("../../static/arrow-up.png");
	background-size:100% 100%;
	animation: moveUp 1s infinite alternate;
}
@keyframes moveUp {
	 0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10rpx); /* 根据需要调整距离 */
  }
  100% {
    transform: translateY(0);
  }
}
.script-wrapper {
	height: 60vh;
	padding: 20rpx;
	.header {
		display: flex;
		justify-content: space-between;
	}
	.content {
		margin-top: 20rpx;
		height: 80%;
		border-bottom: 1rpx solid #F6F7FB;
	}
	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:25rpx;
		color: #90a4ae;
		font-size: 25rpx;
		text {
			text-align: center;
		}
	}
}
</style>
